.el-message--info .el-message__content {
  color: var(--color-font-third);
}
.el-message {
  padding: 0px;
  border-radius: 4px;
  border: 1px solid var(--color-border-second);
  .el-message__icon {
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 18px;
    color: #fff;
    text-align: center;
  }
  .el-message__content {
    color: var(--color-font-first);
  }
}
@each $type in (success, warning, error, info) {
  .el-message--#{$type} {
    background-color: #ffffff;
    border-color: var(--color-#{$type}-plain-border);
    .el-message__icon {
      background-color: var(--color-#{$type});
    }
  }
}

.el-message__closeBtn:hover {
  color: var(--color-font-third);
}

.el-message-box {
  border: 1px solid var(--color-border-second);
}

.el-message-box__title {
  color: var(--color-font-first);
}

.el-message-box__headerbtn .el-message-box__close {
  color: var(--color-font-third);
}

.el-message-box__headerbtn:focus .el-message-box__close,
.el-message-box__headerbtn:hover .el-message-box__close {
  color: var(--color-primary);
}

.el-message-box__content {
  padding: 10px 15px;
  color: var(--color-font-second);
  font-size: 14px;
}

.el-message-box__input input.invalid {
  border-color: var(--color-danger);
  &:focus {
    border-color: var(--color-danger);
  }
}

.el-message-box__status {
  &.el-icon-success {
    color: var(--color-success);
  }
  &.el-icon-info {
    color: var(--color-font-third);
  }
  &.el-icon-warning {
    color: var(--color-warning);
  }
  &.el-icon-error {
    color: var(--color-danger);
  }
}
.el-message-box__errormsg {
  color: var(--color-danger);
}
